<template>
	<div class="p-4 bg-[#F2F3F5] h-screen">
		<div v-for="(item, index) in list" :key="index" class="shadow p-2 bg-white rounded">
			{{ item.positionName }}
			<div>出发地:</div>
			<div>目的地:{{ item.toPositionName }}</div>
			<div>时间:{{ item.createTime }}</div>
			<div class="flex justify-between">
				<div>状态:{{ item.status }}</div>
				<div v-if="item.status === '未上车'">
					<van-button size="small" type="warning" @click="toCancelOrder(item.orderId)">取消</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { cancelOrder, getOrderList, userAddOrder } from "@/api/order.js";
import { showConfirmDialog, showLoadingToast, showToast } from "vant";

const list = ref([]);
const onLoad = async () => {
	const res = await getOrderList();
	if (res) {
		list.value = res.data;
	}
};
const toCancelOrder = (orderId) => {
	showConfirmDialog({
		title: "提示",
		message: `是否要取消该预约？`,
	})
		.then(async () => {
			showLoadingToast("取消中...");
			const res = await cancelOrder(orderId);
			if (res) {
				showToast({
					message: "取消成功",
					type: "success",
				});
				await onLoad();
			}
		})
		.catch(() => {});
};
onMounted(() => {
	onLoad();
});
</script>
<style scoped></style>
